<template>
  <view class="container">
    <!-- 显示商店名称和地址 -->
    <view class="store-info">
      <text class="store-name">{{ shopName }}</text>
      <text class="store-address">{{ shopAddress }}</text>
    </view>

    <!-- 显示地图 -->
    <map :longitude="longitude" :latitude="latitude" :markers="marker" class="map"></map>

    <!-- 选择位置按钮 -->
    <button @tap="chooseLocation" class="choose-location-btn">选择位置</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 接收商店名称和地址
const shopName = ref('');
const shopAddress = ref('');

// 经纬度和标记
let longitude = ref(0);
let latitude = ref(0);
const marker = ref([]);

// 腾讯地图实例
var QQMapWX = require('../../../static/qqmap-wx-jssdk.min.js');
var qqmapsdk;

// 页面加载时获取参数
onMounted(() => {
  // 获取页面传递的参数
  const pages = getCurrentPages(); // 获取当前页面栈
  const currentPage = pages[pages.length - 1]; // 获取当前页面对象
  const options = currentPage.options; // 获取当前页面的options对象

  // 如果有传递 shopName 和 shopAddress 参数，则更新状态
  if (options.shopName) {
    shopName.value = decodeURIComponent(options.shopName);
  }
  if (options.shopAddress) {
    shopAddress.value = decodeURIComponent(options.shopAddress);
  }

  // 获取当前位置
  uni.getLocation({
    type: 'wgs84',
    success: function (res) {
      console.log('当前位置的经度: ' + res.longitude);
      console.log('当前位置的纬度: ' + res.latitude);
      longitude.value = res.longitude;
      latitude.value = res.latitude;
    },
    fail: function (err) {
      console.log("获取位置失败: ", err);
    }
  });

  // 腾讯地图初始化
  qqmapsdk = new QQMapWX({
    key: '5IIBZ-UTYKI-ZBBGR-UHRIW-TIIH5-G2FA2',
  });

});

// 选择位置功能
function chooseLocation() {
  uni.chooseLocation({
    success: (res) => {
      console.log("位置维度" + res.latitude);
      console.log("位置经度" + res.longitude);
    }
  });
}

// 搜索附近酒店
function searchjiudian() {
  qqmapsdk.search({
    keyword: '酒店',
    success: function (res) {
      console.log(res);
      const mks = res.data.map(item => ({
        title: item.title,
        latitude: item.location.lat,
        longitude: item.location.lng,
        width: 20,
        height: 20
      }));
      marker.value = mks;
    }
  });
}
</script>

<style scoped>
.container {
  height: 100vh; /* 使用视口高度，确保父容器占满屏幕 */
  position: relative; /* 相对定位，使按钮能够在地图上层 */
}

.store-info {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: center;
}

.store-name {
  font-size: 18px;
  font-weight: bold;
}

.store-address {
  font-size: 14px;
  color: #888;
}

.map {
  flex: 1; /* 让地图占据父容器的剩余空间 */
  width: 100%; /* 地图宽度铺满 */
  height: 100%; /* 地图高度铺满 */
}

.choose-location-btn {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #007aff;
  color: white;
  padding: 10px;
  border-radius: 5px;
}
</style>
